<template>
  <div>
    <!--  修改商品规格信息  -->
    <el-dialog title="修改采购链接" :visible.sync="isOpenProcurementLink" width="700px"
               @close="closeProcurementLinkModal" center>

      <div style="margin: 20px 0">
        <el-form :model="skuPackageInfo" :rules="onlineLogisticsRules" ref="onlineLogisticsRef" size="small"
                 label-width="80px">
          <el-form-item v-for="(item,index) in procurementLinkList" :key="index" :label="item.label">
            <el-input style="width:500px" v-model="item.value" placeholder="请输入采集链接"
                      clearable/>
            <el-button class="ml10" type="text" size="mini" @click="jumpPage(item.value)">去采购</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="addLink" type="success" size="small">新增</el-button>
        <el-button size="small" @click="closeProcurementLinkModal">取 消</el-button>
        <el-button size="small" type="primary" @click="comfirmChange">确认修改</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  getOrderSkuBuyLink, updateOrderSkuBuyLink
} from "@/api/order/purchaser"

export default {
  name: 'order-list',
  props: {
    //子订单商品规格编码
    skuCode: {
      type: String / Number
    }
  },
  data() {
    return {
      isOpenProcurementLink: false,
      skuPackageInfo: "",//大包规格信息
      buttonLoading: false,
      proButtonLoading: false,//提交物流方案信息按钮loading
      onlineLogisticsRules: { // 线上发货表单校验
        goods_width: [{required: true, message: '商品宽度不能为空', trigger: 'blur'}],
        goods_length: [{required: true, message: '商品长度不能为空', trigger: 'blur'}],
        goods_height: [{required: true, message: '商品高度不能为空', trigger: 'blur'}],
        goods_weight: [{required: true, message: '商品重量不能为空', trigger: 'blur'}],
      },
      orderList: [],//订单列表
      dialogTitle: '订单详情',//弹出框标题
      isShowOrderDetail: false, //是否展示订单详情弹出框
      isOpenOrderDetail: false,
      title: '订单详情',
      orderDetailForm: '',//订单详情
      isShowOnlineLogistics: false,// 是否打开线上物流方案选择弹窗
      logisticsList: [],//物流方案
      warehouseCarrierService: "",// 手填燕文物流方案

      procurementLinkList: [],//采购链接列表
    }
  },
  mounted() {
    this.getProcurementLink()
    console.log('###', this.skuCode)
  },
  methods: {
    // 增加采集链接
    addLink() {
      let length = this.procurementLinkList.length
      this.procurementLinkList.push({
        value: "",
        label: '采购链接' + (length + 1)
      })
    },
    // 去采购
    jumpPage(skuBuyLink) {
      if (skuBuyLink) {
        window.open(skuBuyLink)
      } else {
        this.$message.error('请输入有效链接')
      }
    },
    // 获取采购链接
    getProcurementLink() {
      let data = {
        skuCode: this.skuCode
      }
      getOrderSkuBuyLink(data).then(response => {
        if (response.data) {
          let list = response.data.split(',')
          console.log('list', list)
          for (let i = 0; i < list.length; i++) {
            this.procurementLinkList.push({
              value: list[i],
              label: '采购链接' + (i + 1)
            })
          }
          this.isOpenProcurementLink = true
        }
        console.log('this.procurementLinkList', this.procurementLinkList)
      })
    },
    // 确认修改采购链接
    comfirmChange() {
      this.$confirm("是否确定修改采购链接？", '提示').then(() => {
        let linkList = this.procurementLinkList.map(item => item.value)
        let skuBuyLink = linkList.filter(item => item)
        console.log('linkList', linkList, skuBuyLink)
        const params = {
          skuCode: this.skuCode,
          skuBuyLink: skuBuyLink.toString()
        }
        updateOrderSkuBuyLink(params).then(res => {
          this.$message.success(res.msg);
          this.closeProcurementLinkModal()
        }).catch(() => {
        })
      })

    },
    // 关闭线上发货弹窗
    closeProcurementLinkModal() {
      this.$emit('procurementLinkSwitch', false)
    },
  }
}
</script>
<style scoped>
.el-divider__text {
  font-size: 16px;
  font-weight: bold;
  color: #000;
}
</style>
